<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宗地信息</title>
    <link type="text/css" rel="stylesheet" href="../lib/jquery/themes/default/easyui.css">
    <link type="text/css" rel="stylesheet" href="../lib/jquery/themes/icon.css">
    <link type="text/css" rel="stylesheet" href="../css/index.css">
    <style>
        body,html{
            padding: 0;
            margin: 0;
            height: 100%;
        }
    </style>
</head>
<body>
<script>
    var type = [{ "value": "0", "text": "管理员" }, { "value": "1", "text": "操作人员" }, { "value": "2", "text": "权利人" }];
</script>
<table class="easyui-datagrid"  id="dg" style="width:100%;height:100%"
       data-options="pagination:true,iconCls: 'icon-edit',toolbar: '#tb',fitColumns:true,scrollbarSize:0,rownumbers:true,singleSelect:true,url:'../data/homestead.json',method:'get',onClickRow: onClickRow">
    <thead>
    <tr>
        <th data-options="field:'name0',align:'center',width:40,editor:'textbox'">统一编码</th>
        <th data-options="field:'name1',align:'center',width:40,editor:'textbox'">权利人姓名</th>
        <th data-options="field:'name2',align:'center',width:40,editor:'textbox'">联系方式</th>
        <th data-options="field:'name3',align:'center',width:40,editor:'textbox'">通讯地址</th>
        <th data-options="field:'name4',align:'center',width:40,editor:'textbox'">权属单位代码</th>
        <th data-options="field:'name5',align:'center',width:40,editor:'textbox'">土地坐落</th>
        <th data-options="field:'name6',align:'center',width:40,editor:'textbox'">土地用途</th>
        <th data-options="field:'name7',align:'center',width:40,editor:'textbox'">土地使用权类型</th>
        <th data-options="field:'name8',align:'center',width:40,editor:'textbox'">经度</th>
        <th data-options="field:'name9',align:'center',width:40,editor:'textbox'">纬度</th>
        <th data-options="field:'name10',align:'center',width:40,editor:'textbox'">占地面积(m)</th>
        <th data-options="field:'name11',align:'center',width:40,editor:'textbox'">实测面积(m)</th>
        <th data-options="field:'name12',align:'center',width:40,editor:'textbox'">建立时间</th>
        <th data-options="field:'name13',align:'center',width:40,editor:'textbox'">变更日期</th>
        <th data-options="field:'name14',align:'center',width:40,editor:'textbox'">所属区域</th>
        <th data-options="field:'name15',align:'center',width:40,editor:'textbox'">北至</th>
        <th data-options="field:'name16',align:'center',width:40,editor:'textbox'">南至</th>
        <th data-options="field:'name17',align:'center',width:40,editor:'textbox'">西至</th>
        <th data-options="field:'name18',align:'center',width:40,editor:'textbox'">东至</th>
        <th data-options="field:'name19',align:'center',width:40,editor:'textbox'">备注</th>
    </tr>
    </thead>
</table>
<div id="tb" style="height:auto">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">新增宗地记录</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">删除宗地记录</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">撤销</a>
</div>
<script src="../lib/jquery-1.8.0.min.js"></script>
<script src="../lib/jquery/jquery.easyui.min.js"></script>
<script type="text/javascript">
    var editIndex = undefined;
    function endEditing(){
        if (editIndex == undefined){return true}
        if ($('#dg').datagrid('validateRow', editIndex)){
            $('#dg').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }
    function onClickRow(index){
        if (editIndex != index){
            if (endEditing()){
                $('#dg').datagrid('selectRow', index)
                    .datagrid('beginEdit', index);
                editIndex = index;
            } else {
                $('#dg').datagrid('selectRow', editIndex);
            }
        }
    }
    function append(){
        if (endEditing()){
            $('#dg').datagrid('appendRow',{status:'P'});
            editIndex = $('#dg').datagrid('getRows').length-1;
            $('#dg').datagrid('selectRow', editIndex)
                .datagrid('beginEdit', editIndex);
        }
    }
    function removeit(){
        if (editIndex == undefined){return}
        $('#dg').datagrid('cancelEdit', editIndex)
            .datagrid('deleteRow', editIndex);
        editIndex = undefined;
    }
    function accept(){
        if (endEditing()){
            $('#dg').datagrid('acceptChanges');
        }
    }
    function reject(){
        $('#dg').datagrid('rejectChanges');
        editIndex = undefined;
    }

    function formatter(value,rowData,rowIndex) {
        if(value=="0"){
            return "管理人"
        }else if(value=="1") {
            return "操作人员"
        }else {
            return "权利人"
        }
    }
</script>
</body>
</html>